<template>
  <div class="menus-manage">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/prolist' }">项目列表</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/prolist/proinfo' }">{{proinfo.proNo}}</el-breadcrumb-item>
        <el-breadcrumb-item>成本明细</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <!-- 成本明细 -->
        <div class="card-title">成本明细</div>
          <ul class="money_lis">
            <li>
              <p>
                <label>¥</label><span> {{ sumHour | filtersMoney(sumHour) }}</span>
              </p>
              <i>成员工时费用</i>
            </li>
            <li>
              <p>
                <label>¥</label><span> {{ sumMoy | filtersMoney(sumMoy) }}</span>
              </p>
              <i>项目投入费用</i>
            </li>
            <li>
              <p>
                <label>¥</label><span>{{ sumCot | filtersMoney(sumCot) }}</span>
              </p>
              <i>项目合同金额</i>
            </li>
          </ul>
          <ul class="chart_lis">
            <li>
              <div class="chart_box">
                <el-row>
                  <el-col :span="12">
                    <i>工时数据图表</i>
                    <ve-histogram :data="hourData" :extend="extend" :colors="hourcolors" :settings="hourSettings"></ve-histogram>
                  </el-col>
                  <el-col :span="12">
                     <i>费用数据图表</i>
                    <ve-pie :data="moneyData"></ve-pie>
                  </el-col>
                </el-row>
              </div>
            </li>
            <li>
              <i>总数据图表</i>
              <div class="chart_box">
                <ve-line :data="chartData" :settings="chartSettings"></ve-line>
              </div>
            </li>
          </ul>
        <div class="card-line">
          <!-- 返回 -->
          <el-button size="small" style="float:right;margin: 0 0 15px;" @click="goBack">返回</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import conversion from './index';
// 折线图
import VeLine from 'v-charts/lib/line';
// 柱状图
import VeHistogram from 'v-charts/lib/histogram';
// 饼状图
import VePie from 'v-charts/lib/pie';

import money from '@/public/money.js';

export default {
  // 注入组件
  components: {
    VeLine,
    VeHistogram,
    VePie
  },

  filters: {
    // 显示金额
    filtersMoney (val) {
      return money.addChineseUnit(val);
    }
  },
  // 当前实例数据
  data () {
    return {
      // 合计工时费用
      sumHour: 0,
      // 合计项目费用
      sumMoy: 0,
      // 合计合同费用
      sumCot: 0,

      // 项目基本信息
      proinfo: {},
      // 项目成员
      meblist: {},

      // 所有成员
      allMebs: [],

      // 工时图
      hourcolors: ['#62b4f0', '#1ad4ae'],
      hourSettings: {
        showLine: ['hour'],
        labelMap: {
          'userName': '人员/角色',
          'hour': '投入工时',
          'cost': '人工成本'
        }
      },
      hourData: {
        columns: ['userName', 'hour', 'cost'],
        rows: [
          { 'userName': '张三', 'hour': 0, 'cost': 0 }
        ]
      },

      extend: {
        series: {
          barWidth: 10,
          label: { show: true, position: 'top' }
        }
      },

      // 费用折线图
      moneyData: {
        columns: ['类型', '金额'],
        rows: [
          { '类型': '客户交际费用', '金额': 0 },
          { '类型': '差旅费用', '金额': 0 },
          { '类型': '采购费用', '金额': 0 },
          { '类型': '其他费用', '金额': 0 }
        ]
      },

      chartSettings: {
        labelMap: {
          'dayTime': '日期',
          'hour': '工时',
          'cost': '人工成本',
          'money': '费用成本',
          'contract': '基准'
        },
        stack: { '投入成本': ['工时', '人工成本', '费用成本', '基准'] },
        area: true
      },

      chartData: {
        columns: ['dayTime', 'hour', 'cost', 'money', 'contract'],
        rows: [
          { 'dayTime': '2020-01-01', 'hour': 0, 'cost': 0, 'money': 0, 'contract': 0 }
        ]
      }
    };
  },

  // 创建实例后执行
  created () {
    // 获取项目基本信息
    this.getProinfo();

    this.getMoney();

    this.getConList();
  },

  methods: {
    // 项目合同 - 查询
    getConList () {
      let _this = this;
      // 收集请求信息
      let params = {
        proId: this.proinfo.id
      };
      // 根据项目ID获取对应项目合同数据
      _this.$http.post('api/findContractByProId', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          // 项目合同数据集
          _this.contractData = datas;
          datas.map(item => {
            _this.sumCot += item.money;
          });
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 获取项目信息
    getProinfo () {
      let project = JSON.parse(sessionStorage.getItem('project'));
      this.proinfo = project;
      this.getMembers();
      this.getAllMebs();
    },

    // 获取项目成员
    getMembers () {
      let _this = this;
      let params = {
        proId: _this.proinfo.id
      };
      _this.$http.post('api/findAllProMember', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.meblist = datas;
          // 获取每天人员工时成本
          _this.getHours();
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 获取所有成员（包含所有存在成员）
    getAllMebs () {
      let _this = this;
      let params = {
        proId: _this.proinfo.id
      };
      _this.$http.post('api/findAllProMember2', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.allMebs = datas;
          // 获取每天人员工时成本
          // _this.getHours();
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 获取项目成员考勤工时
    getHours () {
      let _this = this;
      let users = [];
      _this.meblist.map(keys => {
        users.push(keys.userId);
      });
      let params = {
        userIds: users,
        beginTime: moment(_this.proinfo.cycleStart).format('YYYY-MM-DD'),
        endTime: moment(_this.proinfo.cycleEnd).format('YYYY-MM-DD')
      };
      _this.$http.raw('api/findAllUWorks', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          let hourDatas = datas;
          let params = {
            proId: _this.proinfo.id
          };
          _this.$http.post('api/findProConCost', params).then(res => {
            let {code, datas} = res;
            if (code === 0) {
              // 成本核算
              let lineDatas = conversion(_this.proinfo, hourDatas, _this.allMebs, datas);
              // console.log(lineDatas);
              // 每天成本统计数据
              _this.chartData.rows = lineDatas.days;
              // 人工成本总计
              lineDatas.days.map(item => {
                _this.sumHour += item.cost;
              });
              // 成员投入总工时/总成本 - 合计
              _this.meblist.map(meb => {
                let mebHour = 0;
                let mebCost = 0;
                lineDatas.bHours.map(bh => {
                  if (meb.userId === bh.userId) {
                    mebHour += bh.hour;
                    mebCost += (bh.cost / 8) * bh.hour;
                  }
                });
                meb.cost = mebCost;
                meb.hours = mebHour;
              });
              // 核算人员投入工时与成本
              let hdt = [];
              _this.meblist.map(item => {
                hdt.push({
                  userName: item.userName + '/' + item.jobs,
                  hour: item.hours,
                  cost: item.cost
                });
              });
              // 人员工时统计数据
              _this.hourData.rows = hdt;
              // 获取各类项目费用投入
              _this.getMoney();
            }
          }).catch(err => {
            console.log(err);
          });
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 项目费用信息
    getMoney () {
      let _this = this;
      // 收集请求信息
      let params = {
        proId: _this.proinfo.id
      };
      // 获取项目费用信息
      _this.$http.post('api/findProCostByProId', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          let sumKh = 0;
          let sumCl = 0;
          let sumCg = 0;
          let sumQt = 0;
          datas.map(item => {
            if (item.typeCode === 'KH') {
              sumKh += item.cost;
            }
            if (item.typeCode === 'CL') {
              sumCl += item.cost;
            }
            if (item.typeCode === 'CG') {
              sumCg += item.cost;
            }
            if (item.typeCode === 'QT') {
              sumQt += item.cost;
            }
          });

          _this.sumMoy = sumKh + sumCl + sumCg + sumQt;

          // 核算各种费用成本
          _this.moneyData = {
            columns: ['类型', '金额'],
            rows: [
              { '类型': '客户交际费用', '金额': sumKh },
              { '类型': '差旅费用', '金额': sumCl },
              { '类型': '采购费用', '金额': sumCg },
              { '类型': '其他费用', '金额': sumQt }
            ]
          };
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 返回
    goBack () {
      this.$router.push({
        path: '/home/prolist/proinfo/',
        query: {
          tabs: 'third'
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
